<html>
    <head>
    	<meta charset="utf-8">
    	<title>幻灯片效果</title>
    	<style type="text/css">
        #lb{width: 1025px;height: 375px; border:1px solid #000; margin: 0 auto;position: relative;overflow: hidden;cursor: pointer;}
        #ll{width: 3075px;position: absolute;top:0;left:0;opacity: 1;}
        img{float: left;width: 1025px;height: 375px;}
        ul,li{margin: 0;padding: 0; }
        ul{opacity: 0.8;background: #ccc;width: 100%;position: absolute;bottom:50px;padding-left: 450px;}
        li{height: 25px;width: 25px;float: left; list-style-type: none;background: #DE5145;text-align: center;border-radius: 60%; line-height: 25px;margin: 5px;}
        .cur{background: yellow;color: #fff;}
        #pre{height: 30px;width: 50px;position: absolute;top:140px;left:0;z-index: 1;background: #ccc;text-align: center;line-height: 30px;}
        #next{height: 30px;width: 50px;position: absolute;top:140px;right:0;z-index: 1;background: #ccc;text-align: center;line-height: 30px;}
    	</style>
    </head>
    <body>
        <div id="lb">
            <div id="pre">
                <strong><</strong>
            </div>
            <div id="ll">
                <img src="imgs/02.jpg" />
                <img src="imgs/03.jpg" />
                <img src="imgs/04.jpg" / >
            </div>
            <ul>
                <li class="cur">1</li>
                <li>2</li>
                <li>3</li>
            </ul>
            <div id="next">
                <strong>></strong>
            </div>
        </div>
    </body>
    <script type="text/javascript">
        window.onload=function  () {
            var opre=document.getElementById('pre');
            var onext=document.getElementById('next');
            var odiv=document.getElementById('lb');
            var oll=document.getElementById('ll');
            var oimg=document.getElementsByTagName('img');
            var oli=document.getElementsByTagName('li');
            var num=0;
            var time=null;
            var a=0;
            var  opacity=function(num){
                var t=setInterval(function(){
                    a+=2;
                    oll.style.opacity=a/100;
                    if(a==100){
                        a=0;
                        clearInterval(t);
                    }
                    oll.style.left=-(num*1025)+"px";
                },20);
            }

            function show(){
                    time=setInterval(function(){
                    //清空cur样式
                    for(var j=0;j<oli.length;j++){
                            oli[j].className="";
                        }
                    if(num==oimg.length-1){
                        num=0;
                    }else{
                        num++;
                    }
                    oll.style.left=(-num*1025)+"px";
                    oli[num].className="cur";
                    opacity();
                },3000);
            }
            
            show();

            for(var i=0;i<oli.length;i++){
                oli[i].index=i;
                oli[i].onmouseover=function(){
                    clearInterval(time);
                    for(var j=0;j<oli.length;j++){
                        oli[j].className="";
                    }
                    this.className="cur";
                    //alert(this.index);
                    oll.style.left=(-this.index*1025)+"px";
                    opacity(num);
                }

                oli[i].onmouseout=function(){
                    show();
                }
                
                oimg[i].onmouseover=function(){
                    clearInterval(time);
                }
                oimg[i].onmouseout=function(){
                    show();
                }    
            }

            /*右轮播123*/
            onext.onclick=function(){
                //alert(num);
                //alert(oimg.length-1);
                if(num==oimg.length-1){
                    num=0;
                }else{
                    num++;
                } 
                for (var j = 0; j < oli.length; j++) {
                        oli[j].className="";
                        clearInterval(time);
                    };    
                oli[num].className="cur"; 
                oll.style.left=-(num*1025)+"px";
                opacity(num);
                show();
            }
            /*左轮播321*/
            opre.onclick=function(){
                //alert(num);
                //alert(oimg.length-1);
                if(num==0){
                    num=oimg.length-1;
                }else{
                    num--;
                }
                //alert(num);
                for (var j = 0; j < oli.length; j++) {
                        oli[j].className="";
                        clearInterval(time);
                    };    
                oli[num].className="cur"; 
                oll.style.left=-(num*1025)+"px";
                opacity(num);
                show();
            }
        }
    </script>
</html>